<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>工单查询</title>
</head>
<body>
<div th:fragment="main" id="checkWorkOrder" class="checkWorkOrder">
    <link rel="stylesheet" th:href="@{/assets/viewer/viewer.css}">
    <link rel="stylesheet" th:href="@{/assets/jquery.eeyellow.Timeline/jquery.eeyellow.Timeline.css}">
    <link rel="stylesheet" th:href="@{/css/workOrderMaintenance/checkWorkOrder.css}">
    <div class="checkWorkOrder_content">
        <!-- 导航栏 -->
        <div class="title clearfix">
            <ol class="breadcrumb title-content">
                <li><a href="#qualitycontrol-workOrderMaintenance-workOrder">工单维护</a></li>
                <li>工单查询</li>
            </ol>
            <a class="btn btn-primary goback" href="#qualitycontrol-workOrderMaintenance-workOrder">
                <span>«</span>
                返回
            </a>
        </div>
        <!-- 内容 -->
        <div class="contents">
            <div class="work-order-information">
                <div class="order-information" id="basic">
                    <div class="basic-information" id="information">
                        <!-- 基本信息 -->
                    </div>
                </div>
                <div class="process-information" id="process">
                    <div class="task-process">
                        <div class="taskprocess-info" id="processInfo">
                            <!-- <div class="task-title">
                                <i class="fa"></i>
                                <span>子任务信息</span>
                            </div> -->
                            <!-- 子任务流程信息 -->
                            <div class="taskprocess">
                                <div class="panel-group wrap" id="accordion" role="tablist" aria-multiselectable="true">
                                    <!-- 流程信息 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="task-picture" id="taskPicture">
            <!-- 审核图片 -->
        </div>
    </div>
    <!-- 基本业务数据模板 -->
    <script type="text/template" id="informationTpl">
        <table border="0" width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <th><span>工单名称</span>：</th>
                <td>{{workOrderName}}</td>
                <th class="workOrder-state"><span>状态</span>：</th>
                {{if state == 0}}
                <td class="workOrder-state">未分派</td>
                {{else if state == 1}}
                <td class="workOrder-state">进行中</td>
                {{else if state == 2}}
                <td class="workOrder-state">完成</td>
                {{/if}}
            </tr>
            <tr>
                <th><span>产品线</span>：</th>
                <td>{{productLineName}}</td>
                <th><span>项目名称</span>：</th>
                <td>{{projectName}}</td>
            </tr>
            <tr>
                <th><span>施工单位</span>：</th>
                <td colspan="3">{{constructionTeamNames}}</td>
            </tr>
            <tr>
                <th><span>工单进展</span>：</th>
                <td colspan="3">{{progress}}</td>
            </tr>
            <tr>
                <th><span>创建人</span>：</th>
                <td>{{createWorkOrderUserName}}</td>
                <th><span>派发人</span>：</th>
                <td>{{assignWorkOrderUserName}}</td>
            </tr>
            <tr>
                <th><span>创建时间</span>：</th>
                <td>{{createTime}}</td>
                <th><span>完成时间</span>：</th>
                <td>{{endTime}}</td>
            </tr>
        </table>
    </script>
    <!-- 任务流程信息模板 -->
    <script type="text/template" id="processInfoTpl">
        {{each subTaskList as item i}}
        <div class="panel">
            <div class="panel-heading" role="tab" id="heading{{i}}" data-id="{{item.subTaskId}}">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{i}}"
                       aria-expanded="false" aria-controls="collapse{{i}}" class="fa collapsed">
                        <table>
                            <tr>
                                <th>任务名称：</th>
                                <td>{{item.subTaskName}}</td>
                                <th class="workOrder-state">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</th>
                                {{if item.subTaskState == 0}}
                                <td class="workOrder-state">未处理</td>
                                {{else if item.subTaskState == 1}}
                                <td class="workOrder-state">未审核</td>
                                {{else if item.subTaskState == 2}}
                                <td class="workOrder-state">已完成</td>
                                {{else if item.subTaskState == 3}}
                                <td class="workOrder-state">待整改</td>
                                {{/if}}
                            </tr>
                            <tr>
                                <th>施工公司：</th>
                                <td>{{item.organizationTeamName}}  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 是否审核：{{item.checkTask}}</td>
                                <th>备注信息：</th>
                                <td>{{item.description}}</td>
                            </tr>
                        </table>
                    </a>
                </h4>
            </div>
            <div id="collapse{{i}}" class="panel-collapse collapse task-process" role="tabpanel"
                 aria-labelledby="heading{{i}}" aria-expanded="false" style="height: 0px;">
                <div class="details" id="details">
                    <div class="details-title">
                        <span></span>
                        <h5>任务详情</h5>
                    </div>
                    {{if item.subTaskState == 0}}
                    <p>暂无详细信息</p>
                    {{else if item.processRule == null}}
                    <p>任务流程规则异常</p>
                    {{else}}
                    <table class="table details-table">
                        <tbody>
                        <!-- 基本信息 -->
                        <tr>
                            <th><span>设备编号</span>&nbsp;:</th>
                            <td colspan="1">{{item.subTaskBusinessData.deviceId}}</td>
                            <th><span>设备类型</span>&nbsp;:</th>
                            <td colspan="1">{{item.deviceTypeName}}</td>
                            <th><span>设备位置</span>&nbsp;:</th>
                            <td colspan="1">{{item.deviceAddrs}}</td>
                            <th><span>经纬度</span>&nbsp;:</th>
                            <td colspan="1">{{item.subTaskBusinessData.longitude}} /
                                {{item.subTaskBusinessData.latitude}}
                            </td>
                        </tr>
                        <!-- 经纬度、获取方式、RSRP、CELLID、SINR -->
                        <tr>
                            {{if item.processRule.additionalBusinessId == 4}}
                            <th><span>获取方式</span>&nbsp;:</th>
                            <td>
                                {{if item.subTaskBusinessData.acquisitionMode}}
                                蓝牙
                                {{else}}
                                WIFI
                                {{/if}}
                            </td>
                            <th><span>RSRP</span>&nbsp;:</th>
                            <td>{{item.subTaskBusinessData.rsrp}}</td>
                            <th><span>CELLID</span>&nbsp;:</th>
                            <td>{{item.subTaskBusinessData.cellid}}</td>
                            <th><span>SINR</span>&nbsp;:</th>
                            <td>{{item.subTaskBusinessData.sinr}}</td>
                            {{else if item.processRule.additionalBusinessId == 5}}
                            <th><span>获取方式</span>&nbsp;:</th>
                            <td>
                                {{if item.subTaskBusinessData.acquisitionMode}}
                                蓝牙
                                {{else}}
                                WIFI
                                {{/if}}
                            </td>
                            <th><span>RSRP</span>&nbsp;:</th>
                            <td>{{item.subTaskBusinessData.rsrp}}</td>
                            <th><span>CELLID</span>&nbsp;:</th>
                            <td>{{item.subTaskBusinessData.cellid}}</td>
                            <th><span>SINR</span>&nbsp;:</th>
                            <td>{{item.subTaskBusinessData.sinr}}</td>
                            {{/if}}
                        </tr>
                        <!-- 具备安装、原因 -->
                        <tr>
                            {{if item.processRule.additionalBusinessId == 1}}
                            <th><span>具备安装</span>&nbsp;:</th>
                            <td>
                                {{if item.subTaskBusinessData.install}}
                                是
                                {{else}}
                                否
                                {{/if}}
                            </td>
                            <th><span>原因</span>&nbsp;:</th>
                            <td colspan="7">{{item.subTaskBusinessData.isInstallDesc}}</td>
                            {{else if item.processRule.additionalBusinessId == 4}}
                            <th><span>具备安装</span>&nbsp;:</th>
                            <td>
                                {{if item.subTaskBusinessData.install}}
                                是
                                {{else}}
                                否
                                {{/if}}
                            </td>
                            <th><span>原因</span>&nbsp;:</th>
                            <td colspan="7">{{item.subTaskBusinessData.isInstallDesc}}</td>
                            {{else if item.processRule.additionalBusinessId == 7}}
                            <th><span>具备安装</span>&nbsp;:</th>
                            <td>
                                {{if item.subTaskBusinessData.install}}
                                是
                                {{else}}
                                否
                                {{/if}}
                            </td>
                            <th><span>原因</span>&nbsp;:</th>
                            <td colspan="7">{{item.subTaskBusinessData.isInstallDesc}}</td>
                            {{/if}}
                        </tr>
                        <!-- 故障原因、故障描述、是否恢复 -->
                        <tr>
                            {{if item.processRule.additionalBusinessId == 3}}
                            <th><span>故障原因</span>&nbsp;:</th>
                            <td colspan="3">{{item.subTaskBusinessData.faultReason}}</td>
                            <th><span>故障描述</span>&nbsp;:</th>
                            <td colspan="3">{{item.subTaskBusinessData.faultDesc}}</td>
                            <th><span>是否恢复</span>&nbsp;:</th>
                            <td>
                                {{if item.subTaskBusinessData.recove}}
                                是
                                {{else}}
                                否
                                {{/if}}
                            </td>
                            {{else if item.processRule.additionalBusinessId == 6}}
                            <th><span>故障原因</span>&nbsp;:</th>
                            <td colspan="3">{{item.subTaskBusinessData.faultReason}}</td>
                            <th><span>故障描述</span>&nbsp;:</th>
                            <td colspan="3">{{item.subTaskBusinessData.faultDesc}}</td>
                            <th><span>是否恢复</span>&nbsp;:</th>
                            <td>
                                {{if item.subTaskBusinessData.recove}}
                                是
                                {{else}}
                                否
                                {{/if}}
                            </td>
                            {{else if item.processRule.additionalBusinessId == 9}}
                            <th><span>故障原因</span>&nbsp;:</th>
                            <td colspan="3">{{item.subTaskBusinessData.faultReason}}</td>
                            <th><span>故障描述</span>&nbsp;:</th>
                            <td colspan="3">{{item.subTaskBusinessData.faultDesc}}</td>
                            <th><span>是否恢复</span>&nbsp;:</th>
                            <td>
                                {{if item.subTaskBusinessData.recove}}
                                是
                                {{else}}
                                否
                                {{/if}}
                            </td>
                            {{/if}}
                        </tr>
                        <!-- 描述 -->
                        <tr>
                            {{if item.subTaskState == 1}}
                            {{if item.subTaskProcessInfoList.length == 1}}
                            <th><span>备注</span>&nbsp;:</th>
                            <td colspan="9">{{item.subTaskProcessInfoList[0].description}}</td>
                            {{else if item.subTaskProcessInfoList.length > 1}}
                            <th><span>备注</span>&nbsp;:</th>
                            <td colspan="9">
                                {{if item.subTaskProcessInfoList.length > 1}}
                                    {{item.subTaskProcessInfoList[1].description}}
                                {{/if}}
                            </td>
                            {{else}}
                            <th><span>备注</span>&nbsp;:</th>
                            <td colspan="9"></td>
                            {{/if}}
                            {{else if item.subTaskState == 2}}
                            <th><span>备注</span>&nbsp;:</th>
                            {{if item.subTaskProcessInfoList.length > 1}}
                            <td colspan="9">{{item.subTaskProcessInfoList[1].description}}</td>
                            {{else}}
                            <td colspan="9">
                                {{item.subTaskProcessInfoList[0].description}}
                            </td>
                            {{/if}}
                            {{else if item.subTaskState == 3}}
                            <th><span>备注</span>&nbsp;:</th>
                            {{if item.subTaskProcessInfoList[0].description}}
                            <td colspan="9">{{item.subTaskProcessInfoList[0].description}}</td>
                            {{else}}
                            <td colspan="9"></td>
                            {{/if}}
                            {{/if}}
                        </tr>
                        <!-- 任务图片 -->
                        <tr>
                            <th><span>任务图片</span>&nbsp;:</th>
                            <td colspan="9">
                                {{if item.subTaskImageList.length == 0}}
                                <p>暂无图片</p>
                                {{else}}
                                <input data-id="{{item.subTaskId}}" class="btn btn-primary btn-xs view-picture"
                                       type="button" value="点击查看">
                                {{/if}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    {{/if}}
                </div>
                <div class="panel-body taskprocess-info process-info">
                    <div class="process">
                        <span class="process-title"></span>
                        <h5>流程信息</h5>
                    </div>
                    {{if item.subTaskProcessInfoList.length == 0}}
                    <p>暂无流程信息</p>
                    {{else}}
                    <!-- 流程 -->
                    <table class="table process-table" id="processTable">
                        <tr>
                            <th>时间</th>
                            <th>任务名称</th>
                            <th>任务状态</th>
                            <th>操作人</th>
                            <th>备注</th>
                        </tr>
                        {{each item.subTaskProcessInfoList as tag k}}
                        <tr>
                            <td>{{tag.updateTime}}</td>
                            <td>{{item.subTaskName}}，{{tag.processName}}</td>
                            <td>
                                <!--{{if tag.processState == 0}}-->
                                <!--施工中-->
                                <!--{{else if tag.processState == 1}}-->
                                <!--审核中-->
                                <!--{{else if tag.processState == 2}}-->
                                <!--施工完成-->
                                <!--{{else if tag.processState == 3}}-->
                                <!--审核通过-->
                                <!--{{else if tag.processState == 4}}-->
                                <!--审核驳回-->
                                <!--{{/if}}-->
                                {{if tag.processState == 0}}
                                未处理
                                {{else if tag.processState == 1}}
                                处理完成
                                {{else if tag.processState == 2}}
                                未审核
                                {{else if tag.processState == 3}}
                                审核驳回
                                {{else if tag.processState == 4}}
                                待整改
                                {{else if tag.processState == 5}}
                                整改完成
                                {{else if tag.processState == 6}}
                                审核通过
                                {{else if tag.processState == 7}}
                                已完成
                                {{/if}}
                            </td>
                            <td>
                                {{if tag.uiInputName == ''}}
                                </span>{{tag.operatorName}}
                                {{else}}
                                </span>{{tag.uiInputName}}
                                {{/if}}
                            </td>
                            <td>{{tag.description}}</td>
                        </tr>
                        {{/each}}
                    </table>
                    {{/if}}
                </div>
            </div>
        </div>
        {{/each}}
    </script>
    <!-- 查看子任务图片模板 -->
    <script type="text/template" id="taskPictureTpl">
        <ul id="taskPictureList" class="clearfix">
            {{each subTaskImageList as item i}}
            <li><img data-original="{{item.imagePath}}" src="{{item.imagePath}}"
                     alt="{{item.description}}"></li>
            {{/each}}
        </ul>
    </script>
    <script th:src="@{/assets/viewer/viewer.min.js}"></script>
    <script th:src="@{/assets/jquery.eeyellow.Timeline/jquery.eeyellow.Timeline.js}"></script>
    <script>
        var workOrderId = JSON.parse($.cookie("workOrderId"));
        var viewer;
        var subTaskList;
        // 获取工单数据
        $.ajax({
            url: contextPath + "/workorder/" + workOrderId,
            type: 'GET',
            dataType: "json",
            contentType: "application/json",
            success: function (data) {
                if (data.code == 1) {
                    console.log(data);
                    subTaskList = data.data.subTaskList;
                    console.log(subTaskList);
                    // 基本信息
                    $("#information").html(template('informationTpl', data.data));
                    // 流程信息
                    $("#accordion").html(template('processInfoTpl', data.data));
                }
            },
            error: function (data) {
                toastr.error(data.message, "请求失败");
            }
        });

        // 子任务流程信息切换
        $(document).ready(function () {
            $('.collapse.in').prev('.panel-heading').addClass('active');
            $('#accordion, #bs-collapse').on('show.bs.collapse', function (a) {
                $(a.target).prev('.panel-heading').addClass('active');
            }).on('hide.bs.collapse', function (a) {
                $(a.target).prev('.panel-heading').removeClass('active');
            });
        });

        // 查看子任务图片
        // $('#processInfo').on('click','.panel-heading',function(){
        //     // 获取子任务数据
        //     var subTaskId = this.dataset.id;
        //     getImg(subTaskId);
        // });
        function getImg(id) {
            var data;
            for (var i = 0; i < subTaskList.length; i++) {
                if (id == subTaskList[i].subTaskId) {
                    data = subTaskList[i];
                    break;
                }
            }

            for (var j in data.subTaskImageList) {
                var image = data.subTaskImageList[j];
                if (j < data.processRule.processRuleToImageFileList.length) {
                    image.description = data.processRule.processRuleToImageFileList[j].description
                } else {
                    var k = j - data.processRule.processRuleToImageFileList.length + 1;
                    image.description = data.deviceId + '_' + k;
                }
            }

            console.log(".........");
            console.log(data);


            $("#taskPicture").html(template('taskPictureTpl', data));
            viewer = new Viewer(document.getElementById('taskPictureList'), {
                url: 'data-original'
            });
            viewer.show();
//                $.ajax({
//                    url: contextPath + "/subtask/" + id,
//                    type: 'GET',
//                    dataType: "json",
//                    contentType: "application/json",
//                    beforeSend: function(){
//                        $("#taskPicture").empty();
//                    },
//                    success: function(data){
//                        if(data.code == 1){
//                            console.log("hello");
//                            console.log(data);
//                            $("#taskPicture").html(template('taskPictureTpl', data.data));
//                            viewer = new Viewer(document.getElementById('taskPictureList'), {
//                                url: 'data-original'
//                            });
//                            viewer.show();
//                        }
//                    },
//                    error: function(data){
//                        toastr.error(data.message, "请求失败");
//                    }
//                });
        }

        $("#process").on('click', '.view-picture', function () {
            // 获取子任务数据
            var subTaskId = this.dataset.id;
            getImg(subTaskId);
        })
    </script>
</div>
</body>
</html>